<template>
	<view>
		<TabMenu :menus="tabList" :active_line="true" :tabCur="tabCur" ref="tableMenu" @clickCtTab="clickCtTab">
		</TabMenu>
		<!-- 内容信息 -->
		<template v-if="orders.length>0">
			<view class="paint-room-info d_f_c" v-for="order in orders" :key="order.id">
				<view class="info-item d_f_r d_s_b">
					<text>红木ID：{{order.id}}</text>
					<text>
						<span class="f_red" v-if="order.transitionStatus==0">待确认</span>
						<span class="f_red" v-if="order.transitionStatus==1 && tabCur==1">已转入</span>
						<span class="f_red" v-if="order.transitionStatus==1 && tabCur==2">已转出</span>
					</text>
				</view>
				<view class="info-item d_f_c">
					<text><span class="f_black">馆藏精品 {{order.boutiqueNumber}}</span></text>
					<text>价格：￥{{order.price}}</text>
					<text>转出店：{{order.storeName}}</text>
					<text>接收店：{{order.transitionStoreName}}</text>
					<text>转移时间：{{order.transitionTime}}</text>
					<text>更新时间：{{order.updateTime}}</text>
				</view>
				<view v-if="order.transitionStatus==0 && tabCur==0">
					<button size="mini" @click="updateTransitionState(order.id,0)">拒绝接收</button>
					<button size="mini" @click="updateTransitionState(order.id,1)">确认接收</button>
				</view>
			</view>
		</template>
		<Nodata v-else></Nodata>
	</view>
</template>

<script>
	import {
		transitionRecord, //获取转移记录,
		transitionState, //修改转场状态
	} from '@/request/api/redWood.js'
	import TabMenu from '@/components/TabMenu.vue'
	import Nodata from '@/components/Nodata.vue'
	export default {
		components: {
			TabMenu,
			Nodata
		},
		activated() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		mounted() {
			this.tabCur = uni.getStorageSync('abc') // 输出 'value1'
			this.$refs.tableMenu.clickCtTab(this.tabCur)
		},
		onHide() {
			uni.setStorageSync('abc', 0)
		},
		data() {
			return {
				tabCur: 0,
				tabList: [{
					title: '待确认 ',
				}, {
					title: '转入记录',
				}, {
					title: '转出记录'
				}],
				orders: [{
					id: '', //红木Id,
					redWoodNumber: '', //红木编号
					boutiqueNumber: '', //馆藏精品编号
					storeName: '', //转出店名称
					transitionStoreName: '', //接收店名称,
					transitionTime: '', //转移时间
					updateTime: '', //更新时间,
					price: '', //价格,
					transitionStatus: '', //状态,0:待确认,1: 已经确认
				}]
			};
		},
		onShow() {
			this.orders = []
		},
		onLoad() {
			this.getTransitionRecord(0)
		},
		methods: {
			clickCtTab(ctCur) {
				this.tabCur = ctCur
				this.getTransitionRecord(this.tabCur)
			},
			async getTransitionRecord(state) {
				const res = await transitionRecord(state)
				this.orders = res.data
			},
			updateTransitionState(id, state) {
				transitionState(id, state).then((res) => {
					uni.showModal({
						title:res.msg
					})
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.xiala {
		padding-top: 60rpx;
	}

	.f_red {
		color: #fc4141;
	}

	.f_black {
		color: #000;
	}

	.paint-room-info {
		background: #fff;
		padding: 0 30px;
		margin-top: 10px;
		padding-bottom: 10px;
	}

	.paint-room-info .info-item {
		display: flex;
		padding: 11px 0;
		border-bottom: .5px solid #eee;
	}

	.d_f_c {
		display: flex;
		flex-direction: column;
	}

	.d_f_r {
		display: flex;
		flex-direction: row;
	}

	.d_s_b {
		justify-content: space-between;
	}

	.paint-room-info .info-item text {
		display: inline-block;
		font-size: 15px;
		font-weight: 400;
		color: #999;
		line-height: 20px;
		white-space: nowrap;
	}

	button {
		float: right;
		margin-right: 5px;
		background: #fc4141;
		color: white;
	}

	button:nth-child(1) {
		background: gray;
	}
</style>